<template>
    <div class="admin-home">
        主页
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

let showMoreItem = ref<boolean>(false)

const goToManageUser = () => {
    router.push({ name: 'manageUser' })
}
</script>

<style lang="less" scoped>
.admin-home{
    width: 100%;
    height: 3000px;
    display: flex;
    .a-h-aside {
        width: 5rem;
        height: 100vh;
        background-color: var(--pc-aside-bg-color);
        float: left;
        position: relative;
        transition: width 0.2s linear;
        &:hover {
            .a-h-a_open {
                display: flex;
            }
        }
        .a-h-a_top {
            width: 100%;
            height: 5rem;
            background-color: var(--pc-aside-avator-bg-color);
            position: relative;
            .a-t_logo {
                width: 3rem;
                height: 3rem;
                position: absolute;
                top: 1rem;
                left: 1rem;
                transition: top 0.4s, left 0.4s;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .a-h-a_content {
            width: 100%;
            height: calc(100% - 5rem);
            .a-h-a_c-item {
                width: 4rem;
                height: 4rem;
                &:hover {
                    cursor: pointer;
                    .icon {
                        width: 33px;
                        height: 33px;
                    }
                    path {
                        fill: var(--pc-font-white);
                    }
                }
            }
        }
        .a-h-a_open {
            width: 1.5rem;
            height: 3rem;
            background: var(--pc-aside-bg-color);
            position: absolute;
            top: calc(50% - 1.5rem);
            left: 5rem;
            border-radius: 0 3rem 3rem 0;
            text-align: right;
            align-items: flex-end;
            padding-right: 0.3rem;
            display: none;
            &:hover {
                display: flex;
                cursor: pointer;
            }
        }
    }
    .a-h-right {
        width: calc(100% - 5rem);
        height: 100vh;
        overflow-y: auto;
        background-color: var(--pc-bg);
    }
}

.active {
    width: 11rem !important;
    .a-h-a_top {
        height: 8rem !important;
        .a-t_logo {
            top: 0.5rem !important;
            left: 3.5rem !important;
        }
        .a-t-header {
            cursor: default;
            width: 10rem;
            height: 3rem;
            position: absolute;
            top: 4rem;
            text-align: center;
            .a-t_title, .a-t_subtitle{
                display: block;
                color: var(--pc-font-white);
            }
            .a-t_title{
                font-size: 18px;
                letter-spacing: 0.5rem;
                padding-left: 0.5rem;
            }
        }
    }
    .a-h-a_c-item {
        width: 100% !important;
        padding-left: 1rem;
        flex-direction: row !important;
        justify-content: flex-start;
        div {
            margin-right: 0.5rem;
        }
        span {
            color: var(--pc-font-gray);
        }
        &:hover {
            background-color: var(--pc-font-gray-opacity);
            span {
                color: var(--pc-font-white);
                font-size: 16px;
            }
        }
    }
    .a-h-a_open {
        left: 10rem !important;
    }
}
</style>